<template>
    <!--                返回和图标-->
    <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        size="3rem"
    >
        <template #left>
            <van-icon name="arrow-left" size="1.8rem"/>
        </template>
    </van-nav-bar>

    <div class="main">
        <h1 class="title">VV</h1>


        <!-- 注册信息-->
        <div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="username"
                        name="username"
                        placeholder="用户名"
                        :rules="[{ pattern:userNamePattern, message: '您的用户名格式有误(3到8位)' }]"
                    />

                    <van-field
                        v-model="account"
                        name="account"
                        placeholder="账号"
                        :rules="[{ pattern:accountPattern , message: '账号格式错误请输入6至10位数字' }]"
                    />

                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        placeholder="密码"
                        :rules="[{ pattern: passwordPattern, message: '只能由字母、数字组成，8至18位' }]"
                    />

                    <!-- 确认密码 -->
                    <van-field
                        v-model="rePassword"
                        type="password"
                        name="rePassword"
                        placeholder="再次输入密码"
                        required
                        :rules="[{ validator: rePasswordPattern, message: '两次密码输入不一致' }]"
                    />

                    <!--                                        个性签名-->
                    <van-field
                        v-model="individuality"
                        name="individuality"
                        placeholder="个性签名"
                    />
                    <!--                                        选择性别-->
                    <van-field name="sex" label="性别">
                        <template #input>
                            <van-radio-group v-model="sex" direction="horizontal">
                                <van-radio name="1">男</van-radio>
                                <van-radio name="2">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <!--                                        上传头像-->
                    <van-field name="avatar" label="上传头像">
                        <template #input>
                            <van-uploader v-model="avatar" :max-count="1"/>
                        </template>
                    </van-field>

                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {sexType, UserRegFromType} from "../../type/Register";
import {useLoginStore} from "../../store/login";

// 获取用户输入的数据
const username = ref('');
const account = ref('');
const password = ref('');
const rePassword = ref('')
const sex = ref<sexType>("1");
const individuality = ref('')
const avatar = ref<any>();


// 验证
//用户名正则，3到8位（字母，数字，下划线，减号）
const userNamePattern = /^.{3,8}$/;
// 账号验证 匹配数字6至10位
const accountPattern = /^[1-9][0-9]{5,10}$/;
//密码正则，只能由字母、数字组成，8-18位
const passwordPattern = /^[A-Za-z0-9]{8,18}$/;
// 判断两次密码是否输入一致
const rePasswordPattern = (value: string) => {
    return password.value == value
}



// 实例化仓库
const loginStore = useLoginStore()

const onSubmit = (values: UserRegFromType) => {
    loginStore.register(values)
};


// 返回按钮
const onClickLeft = () => history.back();

</script>

<style scoped lang="less">

.main {
    .van-icon-arrow-left:before {
        font-size: 1.6rem;
        font-weight: bold;
    }

    .title {
        color: #1989fa;
        margin-top: 10%;
        font-size: 3.5rem;
        text-align: center;
        margin-bottom: 10%;
        font-family: Sounso-Undividedad;
        text-shadow: 3px 2px 9px #ccc;
    }
}
</style>